<template>
  <div class="h-2xl p-1.25rem box-border">
    <a-form
      :label-col-props="{
        span: 3,
      }"
      label-align="right"
      :model="formData"
      :style="{ width: '37.5rem' }"
    >
      <a-form-item field="title" label="标题" required>
        <a-input v-model="formData.title" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item field="description" label="描述">
        <a-input v-model="formData.description" placeholder="请输入描述" />
      </a-form-item>
      <a-form-item field="image" label="封面" required>
        <a-input v-model="formData.image" placeholder="请输入封面图片地址" />
      </a-form-item>
      <a-form-item field="category" label="分类" required>
        <a-select placeholder="请选择分类" v-model:modelValue="formData.category">
          <a-option :value="1">展览</a-option>
          <a-option :value="2">传承人</a-option>
        </a-select>
      </a-form-item>
    </a-form>
    <a-row class="h-100%">
      <MdEditor :value="formData.content" :onChange="change" />
    </a-row>
    <a-row justify="end" align="center" class="mt-0.625rem p-0.625rem box-border">
      <a-button class="w-7.5rem mr-0.625rem" @click="() => router.back()">返回</a-button>
      <a-button @click="handleSubmit" type="primary" class="w-7.5rem">发布</a-button>
    </a-row>
  </div>
</template>
<script setup lang="ts">
//@ts-ignore
import MdEditor from '@/components/MdEditor/index.vue'
//@ts-ignore
import { PostControllerService, type PostAddRequest } from '@/servers'
//@ts-ignore
import { ResponseCode } from '@/servers/core/request'
//@ts-ignore
import { useUserStore } from '@/stores'
import { Message } from '@arco-design/web-vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
const formData: PostAddRequest = reactive({})
const userStore = useUserStore()
const currentUser = computed(() => userStore.currentUser)
const router = useRouter()
const change = (val: string) => {
  formData.content = val
}

const handleSubmit = async () => {
  const res = await PostControllerService.addPostUsingPost(formData)
  if (res.code == ResponseCode.SUCCESS) {
    Message.success({ content: '发布成功' })
  }
}
onMounted(() => {
  if (!currentUser.value.id) {
    router.push('/user/login')
  }
})
</script>
